<template>
  <div class="template">
    <div class="search">
      <div>
        <Input clearable 
          v-model="search.search"
          placeholder="关键字"
          style="width: 310px; margin-right: 10px"
          icon="ios-search"
        ></Input>
        <Button style="width: 90px" type="primary" icon="ios-search" @click="searchFn">搜索</Button>
      </div>
      <Button type="primary" style="width:90px">添加</Button>
    </div>
    <div class="filter">
      <div class="filter-item">
        <span class="title">用户姓名</span>
        <Input clearable  placeholder="请输入用户姓名" style="width:200px"></Input>
      </div>
      <div class="filter-item">
        <span class="title">员工</span>
        <Input clearable  placeholder="请输入员工姓名" style="width:200px"></Input>
      </div>
      <div class="filter-item">
        <span class="title">浏览时间</span>
        <DatePicker style="width:200px;" placeholder="请选择浏览时间"></DatePicker>
      </div>
      <div class="filter-item">
        <Button type="primary" style="width:90px" @click="searchFn">搜索</Button>
        <Button style="margin-left: 10px; width: 90px" @click="clearFn">清空</Button>
      </div>
    </div>
    <div class="table">
      <Table border :columns="diyData.columns" :data="apiData.tableList">
        <template slot="footer">
          <Page
            :total="apiData.total"
            show-total
            :page-size="apiData.per_page"
            :current="search.pageNo"
            class-name="footer-page"
            @on-change="pageChange"
          ></Page>
        </template>
      </Table>
    </div>
  </div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {
        query: {},
        search: {
          search: '',
          page: 1,
        },
        diyDom: {},
        diyData: {
          columns: [
            {
              title: 'ID',
              render: (h, params) => {
                return h('div', params.index + 1)
              },
            },
            {
              title: 'ID',
              key: '',
            },
            {
              title: 'ID',
              key: '',
            },
            {
              title: 'ID',
              key: '',
            },
            {
              title: 'ID',
              key: '',
            },
            {
              title: '操作',
              fixed: 'right',
              render: (h, params) => {
                return h('div', [
                  h(
                    'a',
                    {
                      style: {
                        marginRight: '10px',
                        color: '#2D8cF0',
                      },
                      on: {
                        click: () => {},
                      },
                    },
                    '编辑'
                  ),
                ])
              },
            },
          ],
        },
        apiData: {
          total: 0,
          per_page: 0,
          tableList: [],
        },
      }
    },
    methods: {
      // 获取表格数据
      getTableList() {},
      // 分页
      pageChange(e) {
        this.search.page = e
        this.getTableList()
      },
      // 搜索
      searchFn() {
        this.search.page = 1
        this.getTableList()
      },
      // 清空
      clearFn() {
        this.search = {
          search: '',
          page: 1,
        }
        this.getTableList()
      },
    },
    mounted() {
      this.getTableList()
    },
  }
</script>

<style scoped lang="less">
  .template {
    .search {
      display: flex;
      justify-content: space-between;
    }
    .table {
      margin-top: 10px;
    }
    .filter {
      margin: 10px 0;
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 6px 0 20px 0;
      flex-wrap: wrap;
      border: 1px solid rgba(237, 237, 237, 1);

      .filter-item {
        margin: 14px 0 0 20px;

        .title {
          margin-right: 10px;
          font-size: 14px;
          font-weight: 400;
          color: rgba(74, 74, 74, 1);
          line-height: 17px;
        }
      }
    }
  }
</style>
